<template>
  <div>
      <h1 style="text-align:center;">统计图表</h1>
      <div>
        <div id="charts">

        </div>
      </div>
  </div>
</template>

<script>
//这样不行
// import echarts from 'echarts'
//用另一种一种导入方式（所有导出的东西我都导入进来）
import * as echarts from 'echarts'
//导入请求回来的数据
import {TableData} from '@/request'
export default {
    //写在生命周期钩子函数中
    mounted(){
        //调用方法
        this.getChartsData()
        // console.log(111,echarts);
        
        
    },
  data () {
    return {
         //自己的数据叫
         chartsData:[]   
       }
    },
  methods: {
        //定义方法
        //发请求把数据请求回来
        async getChartsData() {
            let data = await TableData()
            //把请求回来的数据 赋值给 this.chartsData
            this.chartsData = data.data.data  
            //数据回来之后再执行
            this.createCharts()
        },
        //生成图表
        createCharts() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('charts'));

            //配置 option
            // let option = {
            //     //折线图
            //     xAxis: [
            //     {
            //         type: "category",
            //         boundaryGap: false,
            //         //快速获取对象中的键 keys
            //         data: this.chartsData.map(item => {
            //            // item - {year: '',number: ''} 
            //              return item.year + '年'
            //         })
            //       }
            //     ],
            //     yAxis: [
            //         {
            //             type: "value",
            //             name: "个"
            //         }
            //     ],
            //     series: [
            //         {
            //             name: "人数",
            //             type: "line",
            //             data: this.chartsData.map(item => item.number)
            //         }
            //     ]

            // }
                
           
        //    配置 option
            // let option = {
            //     //柱状图
            //     xAxis: [
            //     {
            //         type: "category",
            //         boundaryGap: false,
            //         //快速获取对象中的键 keys
            //         data: this.chartsData.map(item => {
            //            // item - {year: '',number: ''} 
            //              return item.year + '年'
            //         })
            //       }
            //     ],
            //     yAxis: [
            //         {
            //             type: "value",
            //             name: "个"
            //         }
            //     ],
            //     series: [
            //         {
            //             name: "人数",
            //             type: "bar",
            //             data: this.chartsData.map(item => item.number)
            //         }
            //     ]

            // }

            //饼图
            let option = {
                title: {
                    text: '毕业年份和人数',
                    textStyle: {
                        color: '#f00'
                    }
                },
                series: [
                    {
                        name: "毕业年份和人数",
                        type: "pie",
                        data: [
                            ...this.chartsData.map(item => {
                                return {
                                    value: item.number,
                                    name: item.year + '年'
                                }
                            })
                        ]
                    }
                ]
            }

           //第三步
           // 使用刚指定的配置项和数据显示图表。
           myChart.setOption(option);
       }
    },
    created() {
        //调用方法
    }

}
</script>

<style lang="scss" scoped> 
    #charts{
        width: 600px;
        height: 400px;
    }
</style>
